<template>
  <div class="headlthtest-wrap">
    <el-form
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
      :model="ruleForm"
      :rules="rules"
    >
      <el-form-item label="老人姓名">
        <el-input v-model="ruleForm.name" disabled></el-input>
      </el-form-item>
      <el-form-item label="身份证号" prop="id_card">
        <el-input v-model="ruleForm.id_card" placeholder="请输入老人身份证号" disabled></el-input>
      </el-form-item>
      <el-form-item label="老人电话" prop="mobile">
        <el-input v-model="ruleForm.mobile" placeholder="请输入老人电话" disabled></el-input>
      </el-form-item>
      <el-form-item label="信息提供者" prop="source_name" required>
        <el-input v-model="ruleForm.source_name" placeholder="请输入信息提供者"></el-input>
      </el-form-item>
      <el-form-item label="与老人关系" prop="relation" required>
        <el-input v-model="ruleForm.relation" placeholder="请输入与老人关系"></el-input>
      </el-form-item>
      <el-form-item label="评估原因" prop="cause">
        <el-select v-model="ruleForm.cause" placeholder="请选择评估原因">
          <el-option label="第一次评估" value="1"></el-option>
          <el-option label="常规评估" value="2"></el-option>
          <el-option label="状态变化后重新评估" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="联系人姓名" prop="contact_name">
        <el-input v-model="ruleForm.contact_name" placeholder="请输入联系人姓名"></el-input>
      </el-form-item>
      <el-form-item label="联系人电话" prop="contact_mobile">
        <el-input v-model="ruleForm.contact_mobile	" placeholder="请输入联系人电话"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">下一步</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {
    gethealthtestlist,
    gethealthtestinfo
  } from "@/api/oldermanager";
  export default {
    name: "Healthtest",
    props: {
      data: {
        type: Object,
        default() {
          return {};
        },
      }
    },
    data() {
      return {
        rules: {
          source_name: [
            { required: true, message: '请输入信息提供者', trigger: 'blur' },
          ],
          relation: [
            { required: true, message: '请输入与老人关系', trigger: 'blur' },
          ],
          cause: [
            { required: true, message: '请选择评估原因', trigger: 'blur' },
          ],
          contact_name: [
            { required: true, message: '请输入联系人姓名', trigger: 'blur' },
          ],
          contact_mobile: [
            { required: true, message: '请输入联系人电话', trigger: 'blur' },
          ],
        },
        ruleForm: {
          name: "",
          id_card: "",
          mobile: "",
          source_name: "",
          relation: "",
          cause: "",
          contact_name: "",
          contact_mobile: "",
        }
      }
    },
    watch: {
      data: {
        handler: function (newValue, oldValue) {
          this.ruleForm = Object.assign(this.ruleForm, newValue)
        },
        deep: true,
      },
    },
    mounted() {
      this.ruleForm = Object.assign(this.ruleForm, this.data);
    }, 
    methods: {
      submitForm() {
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            gethealthtestinfo("post", this.ruleForm).then(res => {
              if(res.code == 200) {
                this.$emit("handleGetInfo", res.data.res_id)
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    },
    
  }
</script>

<style lang="scss" scoped>
  ::v-deep {
    .el-select{
      width: 100%;
    }
  }
</style>
